<template>
  <view class="container">
    <view class="header">
      <text class="title">我的报修</text>
      <view class="create-btn" @click="createRepair">
        <text class="btn-text">新增报修</text>
      </view>
    </view>
    
    <!-- 报修状态过滤 -->
    <view class="filter-tabs">
      <view 
        class="tab-item" 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="{ active: currentTab === tab.value }"
        @click="switchTab(tab.value)"
      >
        {{ tab.name }}
      </view>
    </view>
    
    <!-- 报修列表 -->
    <view class="repair-list" v-if="repairList.length > 0">
      <view 
        class="repair-item" 
        v-for="(item, index) in filteredRepairList" 
        :key="index"
        @click="viewDetail(item.id)"
      >
        <view class="repair-header">
          <text class="repair-type">{{ item.type }}</text>
          <text class="repair-status" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</text>
        </view>
        <view class="repair-content">
          <text class="repair-desc">{{ item.description }}</text>
          <view class="repair-location">
            <text class="location-label">报修位置：</text>
            <text class="location-text">{{ item.location }}</text>
          </view>
        </view>
        <view class="repair-footer">
          <text class="repair-time">{{ item.create_time }}</text>
          <view class="repair-actions">
            <text class="action-btn" v-if="item.status === 'pending'">取消报修</text>
            <text class="action-btn" v-if="item.status === 'completed'">评价</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <image class="empty-image" src="/static/empty.png"></image>
      <text class="empty-text">暂无报修记录</text>
      <view class="create-empty-btn" @click="createRepair">
        <text>立即报修</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'all',
      tabs: [
        { name: '全部', value: 'all' },
        { name: '待处理', value: 'pending' },
        { name: '处理中', value: 'processing' },
        { name: '已完成', value: 'completed' }
      ],
      repairList: [
        {
          id: 1,
          type: '水电维修',
          status: 'pending',
          description: '卫生间水龙头漏水，需要维修',
          location: 'A栋3楼301室',
          create_time: '2025-06-28 14:30'
        },
        {
          id: 2,
          type: '设备故障',
          status: 'processing',
          description: '空调不制冷，请尽快安排维修',
          location: 'B栋5楼502室',
          create_time: '2025-06-27 09:15'
        },
        {
          id: 3,
          type: '公共设施',
          status: 'completed',
          description: '电梯按钮失灵，需要检修',
          location: 'C栋电梯',
          create_time: '2025-06-25 16:45'
        }
      ]
    }
  },
  computed: {
    filteredRepairList() {
      if (this.currentTab === 'all') {
        return this.repairList
      } else {
        return this.repairList.filter(item => item.status === this.currentTab)
      }
    }
  },
  methods: {
    // 切换标签
    switchTab(tab) {
      this.currentTab = tab
    },
    
    // 创建新报修
    createRepair() {
      uni.navigateTo({
        url: '/pages/services/repair/create'
      })
    },
    
    // 查看报修详情
    viewDetail(id) {
      uni.navigateTo({
        url: `/pages/services/repair/detail?id=${id}`
      })
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'pending': '待处理',
        'processing': '处理中',
        'completed': '已完成',
        'cancelled': '已取消'
      }
      return statusMap[status] || status
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      return `status-${status}`
    }
  }
}
</script>

<style>
.container {
  padding: 30rpx;
  background-color: #F8F8F8;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.create-btn {
  background-color: #007AFF;
  padding: 16rpx 30rpx;
  border-radius: 30rpx;
}

.btn-text {
  color: #FFFFFF;
  font-size: 28rpx;
}

.filter-tabs {
  display: flex;
  background-color: #FFFFFF;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
  padding: 10rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #007AFF;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 4rpx;
  background-color: #007AFF;
  border-radius: 2rpx;
}

.repair-list {
  margin-bottom: 30rpx;
}

.repair-item {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.repair-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.repair-type {
  font-size: 32rpx;
  font-weight: bold;
}

.repair-status {
  font-size: 28rpx;
}

.status-pending {
  color: #FF9500;
}

.status-processing {
  color: #007AFF;
}

.status-completed {
  color: #34C759;
}

.status-cancelled {
  color: #8E8E93;
}

.repair-content {
  margin-bottom: 20rpx;
}

.repair-desc {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
  line-height: 1.5;
}

.repair-location {
  display: flex;
  font-size: 26rpx;
  color: #666;
}

.repair-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1rpx solid #F2F2F2;
  padding-top: 20rpx;
}

.repair-time {
  font-size: 24rpx;
  color: #999;
}

.repair-actions {
  display: flex;
}

.action-btn {
  font-size: 26rpx;
  color: #007AFF;
  margin-left: 30rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
}

.create-empty-btn {
  background-color: #007AFF;
  color: #FFFFFF;
  padding: 20rpx 60rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}
</style> 